<template>
  <div class="item">
    <embed class="pic" :src="svgImg" type="image/svg+xml"/>
<!--    <div style="position: absolute;top: 0;left: 0">-->
<!--      <el-input v-model="url" placeholder="请输入地址"></el-input>-->
<!--      <el-input v-model="layers" placeholder="请输入图层名称"></el-input>-->
<!--      <el-form label-width="100px" style="background: white">-->
<!--        <el-form-item label="中心点经度">-->
<!--          <el-input v-model="lon"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="中心点纬度">-->
<!--          <el-input v-model="lat"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="缩放层级">-->
<!--          <el-input v-model="zoomIndex"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item size="large">-->
<!--          <el-button type="primary" @click="changeMapzdcy">更新图层</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->

<!--    </div>-->
    <el-button type="primary"  @click="load9" style="font-size: 15px;position: absolute;bottom: 0;right: 0">95X_9</el-button>
  </div>
</template>

<script>
import svg9 from "../../../public/svg/9.svg"
export default {
  data() {
    return {
      url:"http://218.93.116.192:8087/geoserver/xf/wms",
      layers:"xf:重点产业（产业引导）-新能源汽车",
      lon:119.91,
      lat:31.63,
      zoomIndex:11.0,
      svgImg:svg9,
      layersList:[
          "xf:重点产业（产业引导）-高端装备",
          "xf:重点产业（产业引导）-新能源汽车",
          "xf:重点产业（产业引导）-新一代信息技术",
          "xf:重点产业（产业引导）-新能源",
          "xf:重点产业（产业引导）-新型节能环保",
          "xf:重点产业（产业引导）-新材料",
          "xf:重点产业（产业引导）-医疗健康",
          "xf:重点产业（产业引导）-高端纺织",
          "xf:重点产业（产业引导）-绿色精品钢",
      ]
    };
  },
  created() {

  },
  mounted() {
    window.svgFunction9 = this.svgFunction9
  },
  beforeDestroy() {
  },
  methods: {
    svgFunction9(index) {
      console.log('被调用的方法----------数据：' + index)
      if (index<=8){
        this.zoomIndex=11.0
        this.layers=this.layersList[index]
        this.changeMapzdcy()
      }
    },
    load9(){
      this.layers="xf:ppt_95X_9"
      this.zoomIndex=11.2
      this.changeMapzdcy()
    },
    changeMapzdcy(){
      var url=this.url
      var layers=this.layers
      this.$store.state.mapChangeData={
        url:url,
        name:"重点产业",
        params:{
          LAYERS: layers
        },
        location:[this.lon, this.lat],
        zoom:this.zoomIndex
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.item{
  width: 100%;
  height: 100%;
  //padding: 16px 16px 10px 16px;
  box-sizing: border-box;
  background-size: cover;
  background-position: center center;
  //background-image: url("../../assets/img/datav/95/9.png");
  .pic{
    width: 100%;
    height: 100%;
    .ansexi{
      position: absolute;
      left: 20px;
      top: -46px;
      width: 105px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
      0 0 6px rgba(0, 237, 237, 0.4);
    }
  }
}
</style>
